<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>机你太美！</title>
    <link rel="stylesheet" href="../static/css/components.css">

    <link rel="stylesheet" href="../static/css/responsee.css">
    <link rel="stylesheet" href="../static/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="../static/owl-carousel/owl.theme.css">
    <!-- CUSTOM STYLE -->
    <link rel="stylesheet" href="../static/css/template-style.css">
    <script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-ui.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .link {
            width: 60px;
            position: relative;
            left: 1350px;
        }
    </style>
</head>

<body class="size-1280 slide-to-left">
<nav class="slide-nav aside-nav">
    <ul>
        <li><a href="http://localhost:8000">首页</a></li>
        <li>
            <a>学生电脑推荐</a>
            <ul>
                <li><a href="/game/">游戏本</a></li>
                <li><a href="/light/">轻薄本</a></li>
            </ul>
        </li>
        <li>
            <a href="/work/">办公笔记本推荐</a>
        </li>
        <li><a href="/forum/">论坛</a></li>
        <li><a href="/config/">模拟装机</a></li>
    </ul>
</nav>
<section class="slide-content">
    <header>
        <!-- LOGO -->
        <nav>
            <div class="link">
                <ul>
                    {% if user == 1 %}
                    <li style="background: white;border-radius: 50%;margin-top: 0.75em"><a href="/userInfo/" target="_top">.........</a></li>
                    {% else %}
                    <li><a href="/logingoto/" target="_top">登录</a></li>
                    {% endif %}
                </ul>

            </div>
        </nav>
    </header>
    <section class="text-center">
        <!-- CAROUSEL -->
        <div id="carousel">
            <div id="header-carousel" class="owl-carousel owl-theme">
                <div class="item">
                    <img src="../static/image/1.jpg" alt="">
                    <div class="line">
                        <h2>装机</h2>
                    </div>
                </div>
                <div class="item">
                    <img src="../static/image/2.jpg" alt="">
                    <div class="line">
                        <h2>嗯哼？</h2>
                    </div>
                </div>
                <div class="item">
                    <img src="../static/image/3.jpg" alt="">
                    <div>
                        <h2>装机！</h2>
                    </div>
                </div>
            </div>
        </div>
        <!--        &lt;!&ndash; FIRST BLOCK &ndash;&gt;-->
        <!--        <div id="first-block" class="text-center">-->
        <!--            <div class="line">-->
        <!--                <div class="margin">-->
        <!--                    <div class="s-12 m-6 l-3 margin-bottom">-->
        <!--                        <i class="icon-paperplane_ico icon3x"></i>-->
        <!--                        <h2 class="margin-bottom">About</h2>-->
        <!--                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>-->
        <!--                    </div>-->
        <!--                    <div class="s-12 m-6 l-3 margin-bottom">-->
        <!--                        <i class="icon-star icon3x"></i>-->
        <!--                        <h2 class="margin-bottom">Company</h2>-->
        <!--                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>-->
        <!--                    </div>-->
        <!--                    <div class="s-12 m-6 l-3 margin-bottom">-->
        <!--                        <i class="icon-message icon3x"></i>-->
        <!--                        <h2 class="margin-bottom">Services</h2>-->
        <!--                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>-->
        <!--                    </div>-->
        <!--                    <div class="s-12 m-6 l-3 margin-bottom">-->
        <!--                        <i class="icon-mail icon3x"></i>-->
        <!--                        <h2 class="margin-bottom">Contact</h2>-->
        <!--                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        &lt;!&ndash; SECOND BLOCK &ndash;&gt;-->
        <!--        <div id="second-block" class="text-center">-->
        <!--            <div class="line">-->
        <!--                <div class="margin-bottom">-->
        <!--                    <div class="margin">-->
        <!--                        <article class="s-12 m-12 l-8 center">-->
        <!--                            <h1 class="margin-bottom">Amazing title</h1>-->
        <!--                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                                tincidunt ut laoreet-->
        <!--                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci-->
        <!--                                tation ullamcorper suscipit-->
        <!--                                lobortis nisl ut aliquip ex ea commodo consequat.-->
        <!--                            </p>-->
        <!--                        </article>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        &lt;!&ndash; GALLERY &ndash;&gt;-->
        <!--        <div id="third-block" class="text-center">-->
        <!--            <div class="line">-->
        <!--                <h2 class="margin-bottom">Gallery</h2>-->
        <!--                <div class="margin">-->
        <!--                    <div class="s-12 m-6 l-3">-->
        <!--                        <img class="margin-bottom full-img" src="../static/image/gallery-1.svg">-->
        <!--                    </div>-->
        <!--                    <div class="s-12 m-6 l-3">-->
        <!--                        <img class="margin-bottom full-img" src="../static/image/gallery-2.svg">-->
        <!--                    </div>-->
        <!--                    <div class="s-12 m-6 l-3">-->
        <!--                        <img class="margin-bottom full-img" src="../static/image/gallery-3.svg">-->
        <!--                    </div>-->
        <!--                    <div class="s-12 m-6 l-3">-->
        <!--                        <img class="margin-bottom full-img" src="../static/image/gallery-4.svg">-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div id="fourth-block" class="text-center">-->
        <!--            <div class="line">-->
        <!--                <div class="s-12 m-12 l-9 center">-->
        <!--                    <div id="news-carousel" class="owl-carousel owl-theme">-->
        <!--                        <div class="item">-->
        <!--                            <h2 class="margin-bottom">Amazing responsive template</h2>-->
        <!--                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                                tincidunt ut laoreet-->
        <!--                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci-->
        <!--                                tation ullamcorper suscipit-->
        <!--                                lobortis nisl ut aliquip ex ea commodo consequat.-->
        <!--                            </p>-->
        <!--                        </div>-->
        <!--                        <div class="item">-->
        <!--                            <h2 class="margin-bottom">Responsive components</h2>-->
        <!--                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                                tincidunt ut laoreet-->
        <!--                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci-->
        <!--                                tation ullamcorper suscipit-->
        <!--                                lobortis nisl ut aliquip ex ea commodo consequat.-->
        <!--                            </p>-->
        <!--                        </div>-->
        <!--                        <div class="item">-->
        <!--                            <h2 class="margin-bottom">Retina ready</h2>-->
        <!--                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod-->
        <!--                                tincidunt ut laoreet-->
        <!--                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci-->
        <!--                                tation ullamcorper suscipit-->
        <!--                                lobortis nisl ut aliquip ex ea commodo consequat.-->
        <!--                            </p>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </section>
    <!--    &lt;!&ndash; FOOTER &ndash;&gt;-->
    <!--    <footer>-->

    <!--    </footer>-->
</section>
<script type="text/javascript" src="../static/js/responsee.js"></script>
<script type="text/javascript" src="../static/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var owl = $('#header-carousel');
        owl.owlCarousel({
            nav: false,
            dots: true,
            items: 1,
            loop: true,
            navText: ["&#xf007", "&#xf006"],
            autoplay: true,
            autoplayTimeout: 3000
        });
        var owl = $('#news-carousel');
        owl.owlCarousel({
            nav: false,
            dots: true,
            items: 1,
            loop: true,
            navText: ["&#xf007", "&#xf006"],
            autoplay: true,
            autoplayTimeout: 3000
        });
    })
</script>
</body>
</html>